<template>
	<view>
		<view class="phoneInp">
			<input 
			class="add86"
				type="number" 
				placeholder="+86" 
				placeholder-class="placecLass86" 
				@input="focusClass1" 
				:class="[isActive1 ? 'blueBorder' : '']"/>
			<input 
				type="number" 
				placeholder="请输入手机号" 
				placeholder-class="placecLass" 
				maxlength="11"
				@input="focusClass2"
				:class="[isActive2 ? 'blueBorder' : '']"/>
		</view>
		<view class="phoneInp psdInp" v-if="isYzmLog">
			<input 
				type="number" 
				placeholder="请输入验证码" 
				placeholder-class="placecLass" 
				maxlength="6"
				:disabled="disabled"
				@input="focusClass3"
				:class="[isActive3 ? 'blueBorder' : '']"/>
				<button class="getYzm-btn" @tap="TimeBtn" :disabled="disabled"><text>{{countdown}}</text><text v-if="timeStatus">s</text></button>
		</view>
		<!-- 密码登录 -->
		<view v-else class="dlInput_psd">
			<input
			type="password" 
			placeholder="请输入密码" 
			placeholder-class="placecLass"
			@input="focusClass4"
			:class="[isActive4 ? 'blueBorder' : '']"/>
		</view>
		<!-- 当手机登录时出现弹窗 -->
	<!-- 	<view v-if="isShowTc">
			<view class="zhezhao" :style="{height:rootHeight + 'px'}"></view>
			<view class="phoneChooseTc">
				<text @tap="yzmLog">短信验证码登陆</text>
				<text @tap="psdLog">密码登陆</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		props:{
			isYzmLog:{
				type:Boolean
			}
		},
		data(){
			return{
				isActive1:false,
				isActive2:false,
				isActive3:false,
				isActive4:false,
				logWay:'', //向上传递登录方式
				// isShowTc:false,//是否显示弹层
				inputValue: '',//实时监听inputValue值
				// isShowNextorGo:true,//默认显示下一步按钮
				countdown:'获取验证码',
				timeStatus:false, //s秒
				disabled:false ,//重新获取按钮是否开启
				// isYzmLog:true,//默认验证登录
			}
		},
		methods:{
			// 实时监听inputValue值
			focusClass1(e){
				if(e.detail.value.length !== 0){
					this.isActive1 = true;
				}else{
					this.isActive1 = false;
				};
				this.inputValue = e.target.value;
				
			},
			// 实时监听passwordValue值
			focusClass2(e){
				if(e.detail.value.length !== 0){
					this.isActive2 = true
				}else{
					this.isActive2 = false
				}
			},
			// 实时监听passwordValue值
			focusClass3(e){
				if(e.detail.value.length !== 0){
					this.isActive3 = true
				}else{
					this.isActive3 = false
				}
			},
			// 实时监听passwordValue值
			focusClass4(e){
				if(e.detail.value.length !== 0){
					this.isActive4 = true
				}else{
					this.isActive4 = false
				}
			},
			// 验证码
			TimeBtn(){
				this.countdown = 60;
				
				this.timeStatus = true;
				let timer = setInterval(()=>{
					--this.countdown
				},1000)
				setTimeout(()=>{
					clearInterval(timer);
					this.timeStatus = false;
					this.countdown = '重新获取';
				},60000);
				if(this.countdown == '重新获取'){
					this.disabled = false
				}else{
					this.disabled = true
				}
			}
			// nextStep(){
			// 	let isPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			// 	let isMail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			// 	if(isPhone.test(this.inputValue)){
			// 		 this.isShowTc = true;
			// 		console.log('手机号');
			// 	}else if(isMail.test(this.inputValue)){
			// 		this.isShowTc = false;
			// 		this.logWay = 'email';
			// 		 this.$emit('sendLogWay',this.logWay)
			// 		 // console.log(this.inputValue);
			// 		 this.$emit('sendInputValue',this.inputValue)
			// 		console.log('邮箱号');
			// 	}else{
			// 		 this.isShowTc = false;
			// 		 uni.showToast({
			// 		 	title:'输入有误，请从新输入',
			// 			icon:'none'
			// 		 })
			// 		console.log('输入有误，请从新输入');
			// 	}
			// },
			// 通过邮箱登录
			// goEmailLog(){
			// 	uni.switchTab({
			// 		url:'/pages/home/home'
			// 	})
			// },
			//弹窗中的密码登录
			// psdLog(){
			// 	this.isShowPsd = true;
			// 	this.isShowNextorGo = false;
			// 	this.isShowTc = false;
			// },
			//弹窗中的短信验证码登录
			// yzmLog(){
			// 	this.logWay = 'yzm'
			// 	this.$emit('sendLogWay',this.logWay)
			// }
		},
		computed:{
			rootHeight(){
				return global.winHeight
			}
		}
	}
</script>

<style>
	.dlInput_con,.psdInput_con{
		display: flex;
		flex-direction: row;
		border-bottom: 1upx solid #DCDCDC;
		align-items: center;
		padding-bottom:16upx;
		}
	.dlInput_con label,.psdInput_con label{
		font-weight: bold;
		font-size: 28upx;
		color: #000000;
	}
	.psdInput_con{
		margin-top: 60upx;
	}
	.placecLass{
		color: #CCCCCC;
		font-size:28upx;
	}
	
	
	.loginMethod{
		margin-top: 28upx;
		color: #999;
		font-size: 24upx;
		text-align: center;
	}
	.loginMethod .line{
		font-weight: 500;
		margin:0 10upx;
	}
	/* .blueBorder{
		border-bottom: 1upx solid #55A0FF!important;
	} */
	.placecLass86{
		font-size: 28upx;
		color: #000;
	}
	/* 遮罩 */
	.zhezhao{
		position: fixed;
		top:0;
		left: 0;
		z-index: 99;
		width: 100%;
		background: rgba(0,0,0,0.5);
	}
	/* 弹窗 */
	.phoneChooseTc{
		position: absolute;
		top:50%;
		left: 50%;
		transform:translate(-50%,-50%);
		z-index: 100;
		background-color: #FFFFFF;
		width:600upx;
		display: flex;
		flex-direction: column;
		border-radius: 10upx;
	}
	.phoneChooseTc text{
		margin:0 38upx;
		height: 94upx;
		line-height: 94upx;
		font-size: 28upx;
		color: #333333;
		border-bottom: 1upx solid #EEEEEE;
	}
	.phoneChooseTc text:last-child{
		border-bottom:none;
	}
	
	
	
	
	
	.phoneInp{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top:50upx;
	}
	.placecLass86{
		font-size: 28upx;
		color: #000;
	}
	.placecLass{
		color: #CCCCCC;
		font-size:28upx;
	}
	
	.phoneInp input{
		color: #333;
		width:422upx !important;
		height:46upx;
		line-height:46upx;
		border-bottom: 1upx solid #DCDCDC;
	}
	.phoneInp .add86 {
		color: #333;
		width:104upx !important;
		height:46upx;
		line-height:46upx;
		border-bottom: 1upx solid #DCDCDC;
		font-size: 28upx;
		color: #000;
		text-align: center;
	}
	.psdInp input{
		width:380upx !important;
	}
	.getYzm-btn{
		width:158upx;
		height: 64upx;
		border:1upx solid #549BFF;
		border-radius: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 !important;
		margin: 0 !important;
	}
	.getYzm-btn text{
		text-align: center;
		font-size: 24upx;
		color: #549BFF;
	}
	.dlInput_psd input{
		width:570upx;
		height:46upx;
		line-height:46upx;
		margin-top:68upx;
		border-bottom: 1upx solid #DCDCDC;
		color: #333;
	}
</style>
